/**
 * Created by luojie on 2017/10/17.
 */
import LimitInput from "./limitInput";
import util from "../utils";
import styles from "../css/pager.scss";
import cx from "classnames";

export default class Pager extends React.PureComponent {
	constructor(props) {
		super(props);
		let { pageSize, totalPage } = props;
		let pageNumber = totalPage <= pageSize ? 1 : Math.ceil(totalPage / pageSize);
		this.state = {
			currentPage: 1,
			pageNumber,
			num: "",

		}
		this.showPage = 5;
		this.previous = this.previous.bind(this);
		this.next = this.next.bind(this);
		this.pagerInput = this.pagerInput.bind(this);
		this.keyup = this.keyup.bind(this);
		this.sure = this.sure.bind(this);
	}
	static defaultProps = {
		pageNo: 1,
		pageSize: 10,
		totalPage: 0,
	}
	componentWillReceiveProps(nextProps) {
		let { pageSize, totalPage } = nextProps;
		let pageNumber = totalPage <= pageSize ? 1 : Math.ceil(totalPage / pageSize);
		this.setState({
			pageNumber,
			currentPage: nextProps.pageNo
		})
	}
	previous() { //上一页
		let { pageNumber, currentPage } = this.state;
		if (currentPage > 1) {
			this.setState({
				currentPage: currentPage - 1
			}, () => {
				this.props.onPage && this.props.onPage(currentPage - 1);
			})
		}
	}
	next() { //下一页
		let { pageNumber, currentPage } = this.state;
		if (pageNumber > currentPage) {
			this.setState({
				currentPage: currentPage + 1
			}, () => {
				this.props.onPage && this.props.onPage(currentPage + 1);
			})
		}
	}
	onPage(index) {

		this.setState({
			currentPage: index,
		}, () => {
			this.props.onPage && this.props.onPage(index);
		})
	}
	pagerInput(e) {
		this.setState({
			num: e
		})
	}
	keyup(e) {
		if (e.keyCode == 13) {  //回车事件
			this.props.onPage && this.props.onPage(parseInt(e.target.value));
			this.setState({
				currentPage: parseInt(e.target.value)
			}, () => {
			})
		}
	}
	sure() {
		let { num, pageNumber } = this.state;
		if (!num || num > pageNumber || num == 0) {
			return;
		}
		this.setState({
			currentPage: num,
		}, () => {
			this.props.onPage && this.props.onPage(num);
		})
	}
	getItemPage(start, end) {
		let list = [];
		let { currentPage, pageNumber } = this.state;
		for (let i = start; (i > 0) && (i <= pageNumber) && i <= end; i++) {
			list.push(
				<button
					onClick={this.onPage.bind(this, i)}
					key={"star-" + start + "end" + end + i}
					className={currentPage == i ? cx("button", "num", "active") : cx("button", "num")}>
					{i}
				</button>
			)
		}
		return list;
	}
	renderPage() {
		let { currentPage, pageNumber } = this.state;
		let halfPage = Math.floor(this.showPage / 2);
		let list = [];
		if (pageNumber <= this.showPage) {   //当总页数小于最多显示多少页数时
			list = this.getItemPage(1, pageNumber);
		} else {
			if (currentPage > halfPage) {  //如果当前选中页码的大于最多页的一半的时候
				if (parseInt(currentPage) + halfPage <= pageNumber) {  //如果当前选中的页码+最多显示页的一半还小于总页数的时候让选中效果保持在最中间。
					list = list.concat(this.getItemPage(currentPage - halfPage, parseInt(currentPage) + halfPage));
				} else {
					if (currentPage == pageNumber) {  //如果当前页是最后一页的时候
						list = list.concat(this.getItemPage(currentPage - (this.showPage - 1), currentPage));
					} else {  //如果当前页是倒数第二页的时候
						list = list.concat(this.getItemPage(currentPage - (this.showPage - 2), currentPage + 1));
					}
				}
			} else {
				list = this.getItemPage(1, 5);
			}
		}
		return list;
	}
	render() {
		let { pageNumber, num } = this.state;
		return (
			<div className={"pager"}>
				<div className = {"pager1"}>
					<button onClick={this.previous} className={"button"}>
						<div className={"left-row"} />
					</button>
					{
						this.renderPage()
					}
					<button onClick={this.next} className={"button"}>
						<div className={"right-row"} />
					</button>
					<div className={"total"}>共{pageNumber}页</div>
				</div>
				<div className={"pager2"}>
					<div className={"go"}>去</div>
					<LimitInput
						reg={util.invalid.numReg}
						onChange={this.pagerInput.bind(this)}
						onKeyUp={this.keyup}
						value={num}
						className={"pager-input"} />
					{/*<input type="text" onChange = {this.pagerInput} onKeyUp={this.keyup} className="pager-input"/>*/}
					<div className={"pager-code"}>页</div>
					<button className={"btn"} onClick={this.sure}>确定</button>
				</div>
			</div>
		)
	}
}